<!-- 差旅报销文本名字 -->
<template>
  <div>
    <!--<div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>-->
    <div class="ctx-line displayflex" @click="toggleNext">
      <div class="label flex1">基础信息</div>
      <i class="iconfont icon-coll"></i>
    </div>
    <div class="detail-list">
      <div class="displayflex detail-list-line">
        <div class="label">单据编号</div>
        <div class="flex1">{{expense.billno}}</div>
      </div>
      <div class="displayflex detail-list-line">
        <div class="label">同行人</div>
        <div class="flex1">{{expense.trippartner}}</div>
      </div>
      <div class="displayflex detail-list-line">
        <div class="label">出差事由</div>
        <div class="flex1">{{expense.travelreasons}}</div>
      </div>
      <div class="displayflex detail-list-line">
        <div class="label">关联出差单</div>
        <div class="flex1">{{detailCtx.biztrip || '--'}}</div>
      </div>
      <div class="displayflex detail-list-line">
        <div class="label">关联加班单</div>
        <div class="flex1">{{detailCtx.overtime || '--'}}</div>
      </div>
      <div class="displayflex detail-list-line">
        <div class="label">总金额</div>
        <div class="flex1">{{detailCtx.money}}元</div>
      </div>
    </div>
    <template v-for="item in detailCtx.items">
      <div class="ctx-line displayflex" @click="toggleNext">
        <div class="label flex1">项目行程</div>
        <div class="blue">总金额：{{item.totalexpense}}元</div>
        <i class="iconfont icon-coll"></i>
      </div>
      <div class="detail-list">
        <div class="displayflex detail-list-line">
          <div class="label">出差类型</div>
          <div class="flex1">{{item.projectvalue}}</div>
        </div>
        <div class="displayflex detail-list-line">
          <div class="label">项目名称</div>
          <div class="flex1">{{item.projectname}}</div>
        </div>
        <div class="displayflex detail-list-line">
          <div class="label">出发城市</div>
          <div class="flex1">{{item.departurepoint}}</div>
        </div>
        <div class="displayflex detail-list-line">
          <div class="label">目的城市</div>
          <div class="flex1">{{item.destinationpoint}}</div>
        </div>
        <div class="displayflex detail-list-line">
          <div class="label">开始时间</div>
          <div class="flex1">{{item.starttime | timeshort}}</div>
        </div>
        <div class="displayflex detail-list-line">
          <div class="label">结束时间</div>
          <div class="flex1">{{item.endtime | timeshort}}</div>
        </div>
        <div class="detail-list-line">
          <div class="label">费用类型</div>
        </div>
        <div class="detail-ticket cf">
          <div class="dt-box" v-for="subitem in item.travelitem" v-if="subitem.cost>0">
            <dl>
              <dt>{{subitem.name}}</dt>
              <dd>{{subitem.cost}}</dd>
            </dl>
          </div>
        </div>
        <div class="detail-list-line dll-spe displayflex">
          <div class="label2">差旅补助</div>
          {{item.travelsubsidydays}}
          <div class="day">天</div>
          {{item.travelsubsidycost}}
          <div class="price flex1">元</div>
        </div>
      </div>
    </template>
    <attachment class="detail-list" :txt="'相关附件'" :attaches="detailCtx.attaches"></attachment>
    <template v-if="showBtn">
      <template v-if="btnGroup">
        <div class="btn-large" v-if="btnGroup.wfrevoke" @click="revoke">撤 回</div>
        <div class="btn-group displayflex" v-if="btnGroup.wfaudit">
          <div class="flex1 save" @click="showDig('Y')">审 核</div>
          <div class="flex1 submit" @click="showDig('N')">驳 回</div>
        </div>
      </template>
      <div class="btn-large disable" v-else>请前往电脑端审核</div>
    </template>
    <!-- 驳回理由弹框 -->
    <x-dialog v-model="showrefuse">
      <div class="dialog-settle">
        <div class="pop-txtarea">
          <textarea :placeholder="placeholderValue" maxlength="200" v-model="rejectreason"></textarea>
        </div>
        <i class="iconfont icon-close" @click="showrefuse=false;"></i>
        <div class="btn" @click="audit(auditValue)">确定</div>

      </div>
    </x-dialog>
  </div>
</template>

<script>
import attachment from "@/components/share/attachment.vue";
export default {
  components: {
    attachment
  },
  props:{
    flowList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      detailCtx: "",
      expense: "",
      triptype: "",
      btnGroup: "",
      // showLoad:false,
      showrefuse: false,
      rejectreason: "",
      auditValue: "", //Y审核，N驳回
      placeholderValue: "",
      showBtn:false
    };
  },
  computed: {
    userInfo() {
      return localStorage.UserInfo ? JSON.parse(localStorage.UserInfo) : "";
    },
    guid() {
      return this.$route.query.guid || "";
    },
    bizdataguid() {
      return this.$route.query.bizdataguid || "";
    },
    // -----------------缓存start
    indexNum(){
      return this.$route.query.indexNum;
    }
    // -----------------缓存end
  },
  created() {
    this.getInit();
  },
  methods: {
    //为了判断出差类型，请求接口
    getInit() {
      var data = {
        staffid: this.userInfo.staffid
      };
      var _this = this;
      this.Ajax.post("ExpenseAccountService/MyExpenseAccountInit", data).then(
        function(resp) {
          if (resp.code == "SUCC") {
            var result = JSON.parse(resp.data);
            _this.triptype = result.triptype;
            _this.getData();
          } else {
            _this.$vux.toast.show({
              type: "warn", //success, warn, cancel, text
              text: resp.message
            });
          }
        }
      );
    },

    getData() {
      this.$emit("showLoadDetail", true);
      var data = {
        expense: {
          guid: this.$route.query.bizdataguid || this.$route.query.guid
        }
      };
      var _this = this;
      this.Ajax.post("ExpenseAccountService/GetExpenseAccountById", data).then(
        function(resp) {
          if (resp.code == "SUCC") {
            let result = JSON.parse(resp.data);
            // console.log(result,"报销明细")
            _this.detailCtx = result;
            _this.expense = result.expense;
            let arrItems = result.items;
            console.log(arrItems);
            for (let i in arrItems) {
              arrItems[i].travelitem = arrItems[i].travelitem
                ? JSON.parse(arrItems[i].travelitem)
                : "";
              arrItems[i].projectvalue =
                _this.triptype[arrItems[i].projectvalue - 1].caption;
            }
            _this.getBtn();
          } else {
            _this.$emit("showLoadDetail", false);
            _this.$vux.toast.show({
              type: "warn", //success, warn, cancel, text
              text: resp.message
            });
          }
        }
      );
    },

    toggleNext(e) {
      if (e.target.className.indexOf("move") > -1) {
        e.target.className = "ctx-line displayflex";
      } else {
        e.target.className = e.target.className + " move";
      }
      var targetValue = e.target.nextElementSibling;
      var styleValue = targetValue.style.display;
      if (styleValue == "none") {
        targetValue.style.display = "block";
      } else {
        targetValue.style.display = "none";
      }
    },

    //判断按钮权限（提交 撤回 审核）
    getBtn() {
      this.$emit("showLoadDetail", true);
      var data = {
        bizguid: this.bizdataguid || this.guid,
        pagekey: "ExpenseAccountEdit",
        staffid: this.userInfo.staffid,
        todoguid: this.bizdataguid ? this.guid : ""
      };
      var _this = this;
      this.Ajax.post("ExpenseAccountService/WFAvailableButtons", data).then(
        function(resp) {
          if (resp.code == "SUCC") {
            _this.$emit("showLoadDetail", false);
            // console.log(JSON.parse(resp.data),"差旅按钮")
            _this.showBtn = resp.data?true:false;
            _this.btnGroup = resp.data ? JSON.parse(resp.data) : "";
          } else {
            _this.$emit("showLoadDetail", false);
            _this.$vux.toast.show({
              type: "warn", //success, warn, cancel, text
              text: resp.message
            });
          }
        }
      );
    },
    //撤回
    revoke() {
      this.$emit("showLoadDetail", true);
      var data = {
        bizguid: this.bizdataguid || this.guid,
        pagekey: "ExpenseAccountEdit",
        staffid: this.userInfo.staffid,
        todoguid: ""
      };
      var _this = this;

      this.Ajax.post("ExpenseAccountService/Revoke", data).then(function(resp) {
        _this.$emit("showLoadDetail", false);
        if (resp.code == "SUCC") {
          _this.$vux.toast.show({
            type: "success", //success, warn, cancel, text
            text: "申请撤销成功",
            onHide() {
              // -----------------缓存start
              sessionStorage.setItem('dealtIndex', _this.indexNum);
              // -----------------缓存end
              _this.$router.go(-1);
            }
          });
        } else {
          _this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.message
          });
        }
      });
    },
    //显示弹框
    showDig(val) {
      this.showrefuse = true;
      this.auditValue = val;
      if (val == "Y") {
        this.placeholderValue = "审核原因（最多200字，非必填）";
      } else if (val == "N") {
        this.placeholderValue = "驳回原因（最多200字）";
      }
    },
    //审核/驳回
    audit(value) {
      var _this = this, txt;
      
      var data = {
        bizguid: this.bizdataguid || this.guid,
        pagekey: "ExpenseAccountEdit",
        staffid: this.userInfo.staffid,
        todoguid: this.guid,
        result: value,
        rejectreason: this.rejectreason
      };
      if (value == "Y") {
        txt = "审核成功";
      } else if (value == "N") {
        txt = "驳回成功";
        if (!this.rejectreason) {
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: "请输入驳回理由"
          });
          return false;
        }
      }
      this.$emit("showLoadDetail", true);
      this.Ajax.post("ExpenseAccountService/Audit", data).then(function(resp) {
        _this.$emit("showLoadDetail", false);
        if (resp.code == "SUCC") {
          _this.$vux.toast.show({
            type: "success", //success, warn, cancel, text
            text: txt,
            onHide() {
              // -----------------缓存start
              sessionStorage.setItem('dealtIndex', _this.indexNum);
              // -----------------缓存end
              _this.$router.go(-1);
            }
          });
        } else {
          _this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.message
          });
        }
      });
    },
  }
};
</script>